<template>
  <div id="timeSliderHeader">
    <div class="timeSliderBox" v-if="showHistory">
      <img
        src="@/assets/png/play.png"
        v-show="!play"
        class="playButton"
        @click="handlePlayButtonClick"
      />

      <img
        src="@/assets/png/stop.png"
        v-show="play"
        class="playButton"
        @click="handlePlayButtonClick"
      />
      <el-slider
        v-model="value"
        :max="maxRange"
        :marks="marks"
        :format-tooltip="formatToolTip"
      >
      </el-slider>
      <div class="dateRange">
        <el-date-picker
          v-model="dateTimeRange"
          type="datetimerange"
          popper-class="myDateRange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
      <el-select v-model="currentPlaySpeedText" id="playSpeed">
        <el-option
          v-for="item in speedOptions"
          :key="item"
          :label="item"
          :value="item"
        >
        </el-option>
      </el-select>
    </div>
    <el-button
      class="normalBtn"
      id="historyToggleBtn"
      @click="handelBtnClick()"
    >
      {{ btnText }}
    </el-button>
  </div>
</template>

<style scoped>
.playButton {
  width: 16px;
  padding-bottom: 11px;
}

#timeSliderHeader,
.timeSliderBox {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.el-slider {
  display: flex;
  min-width: 1000px;
  min-height: 50px;
  padding-left: 20px;
}

.el-date-picker {
  display: flex;
}

.el-date-editor--datetimerange {
  margin-left: 50px;
  height: 32px;
  width: 300px;
}

.dateRange >>> ::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.87);
}
.dateRange >>> ::-xmoz-input-placeholder {
  color: rgba(255, 255, 255, 0.87);
}
.dateRange >>> ::-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.87);
}
</style>

<style>
.el-input .el-input__inner {
  background: transparent;
  color: rgba(255, 255, 255, 0.87);
}

.el-picker-panel,
.el-picker-panel__footer {
  background: #0c1329;
}

#playSpeed {
  margin-left: 20px;
  width: 90px;
}

.timeSliderBox .el-select {
  margin-right: 20px;
}

.el-input__icon {
  line-height: 32px;
}

#historyToggleBtn {
  width: 88px;
  margin-left: 0;
}
</style>

<script>
export default {
  name: 'timeSlider',
  data () {
    return {
      value: 0,
      marks: {
        0: '01:00:00',
        60: '01:01:00',
        120: '01:02:00',
        180: '01:03:00',
        240: '01:04:00',
        300: '01:05:00'
      },

      dateTimeRange: [],
      currentPlaySpeedText: '1X',
      currentPlaySpeed: 1,
      speedOptions: ['1X', '2X'],
      showHistory: false,
      btnText: '历史数据',
      play: false,
      intervalId: null
    }
  },
  computed: {
    maxRange: function () {
      return parseInt(
        Object.keys(this.marks)[Object.keys(this.marks).length - 1],
        10
      )
    }
  },

  watch: {
    currentPlaySpeedText () {
      this.currentPlaySpeed = parseInt(this.currentPlaySpeedText[0])
      if (this.play) {
        this.setPlaySpeed()
      }
    }
  },

  methods: {
    formatToolTip (val) {
      if (!!this.marks[val]) {
        return this.marks[val]
      } else {
        return ''
      }
    },

    handelBtnClick () {
      this.showHistory = !this.showHistory
      this.btnText = this.showHistory ? '切回实时' : '历史数据'
    },

    setPlaySpeed () {
      if (!!this.intervalId) {
        clearInterval(this.intervalId)
      }
      this.intervalId = setInterval(() => {
        console.log(this._uid)
        this.value += 1
      }, 1000 / this.currentPlaySpeed)
    },

    handlePlayButtonClick () {
      this.play = !this.play
      console.log('click', this.play)
      if (this.play) {
        this.setPlaySpeed()
      } else {
        if (!!this.intervalId) {
          clearInterval(this.intervalId)
        }
      }
    }
  },

  mounted () {
    var that = this
    document.onkeydown = function () {
      let key = window.event.keyCode
      if (key == 32) {
        console.log('press space')
        that.handlePlayButtonClick()
      }
    }
  }
}
</script>
